<template>
  <div class="player " :class="{playeractive:showTab}">
    <div class="left" @click="palyisShow">
      <img :src="player[playerListIndex].al.picUrl" alt="" :class="{ play: isbntShow, pause: !isbntShow }" />
      <div class="conten">
        <span class="gequ">{{ player[playerListIndex].name }}</span>
        <span class="name"> - {{ player[playerListIndex].ar[0].name }}</span>
      </div>
    </div>
    <div class="right">
      <div class="bofang" @click.stop="play">
        <i class="iconfont icon-bofang1" v-show="!isbntShow"></i>
        <i class="iconfont icon-zanting" v-show="isbntShow"></i>
      </div>
      <i class="iconfont icon-bofangliebiao2"></i>
    </div>
    <iframe>
      <audio ref="audio" @ended="ended" @loadeddata="loadeddata"
        :src="`https://music.163.com/song/media/outer/url?id=${player[playerListIndex].id}.mp3`"></audio>
    </iframe>

    <van-popup v-model="show" position="bottom" :style="{ height: '100%',width:'100%' }">
      <playTheDetails :playerList="player[playerListIndex]" :play="play" :isbntShow="isbntShow"
        :addDuration="addDuration" :palyisShow="palyisShow" :xiugaitime="xiugaitime">
      </playTheDetails>
    </van-popup>
  </div>

</template>
<script>
import { mapMutations, mapState } from "vuex";
import  playTheDetails  from '@/components/PlayTheDetails.vue'
export default {
    components:{
        playTheDetails
    },
  data() {
    return {
        clearset:null,
        show:false
    };
  },
    mounted() {
        this.$store.dispatch('getLyric', this.player[this.playerListIndex].id) 
    },
  updated(){
      this.$store.dispatch('getLyric', this.player[this.playerListIndex].id)
     
  },
  computed: {
    ...mapState(['showTab',"player", "playerListIndex", "isbntShow", 'Tcurrenttime']),
   
  },
  methods: {
    ...mapMutations(['updatedShowTab',"updataIsbntShow", 'updatedPalyShow', 'updatedTheCurrentTime', 'updatedDuration',]),
      //播放or暂停
    play() {
      if (this.$refs.audio.paused) {
        this.$refs.audio.play();
        this.updataIsbntShow(true);
          clearInterval(this.clearset)
        this.updatedTime()//播放开启定时器  

      } else {
        this.$refs.audio.pause();
        this.updataIsbntShow(false);
          clearInterval(this.clearset)//暂停清除定时器
      }
    },
    palyisShow(){
      this.show = !this.show
    },
      // 音频数据加载完成后，自动执行事件
      loadeddata() {
          this.addDuration()
      },
    //播放完
      ended(){ 
        this.updataIsbntShow(false);
      },
      addDuration(){
          this.updatedDuration(this.$refs.audio.duration)//总时长
      },
      //修改播放时间
      xiugaitime(value){
        this.$refs.audio.currentTime = value; 
      },
    //播放时间
    updatedTime(){
        this.clearset= setInterval(()=>{
            this.updatedTheCurrentTime(this.$refs.audio.currentTime)//当前播放时间
        },1000)
    }
  },
  watch: {
    // 如果下标发生变化就自动播放
    playerListIndex() {
      this.$refs.audio.autoplay = true;
      if (this.$refs.audio.paused) {
        this.$refs.audio.play();
        this.updataIsbntShow(true);
        
      }
    },
    player() {
      if (!this.isbntShow) {
        this.$refs.audio.autoplay = true;
        this.updataIsbntShow(true);
      } 
    },
    
    $route(to,from){ 
     if (to.path == '/found' || to.path == '/my' || to.path == '/focuson' || to.path == '/videoview'){ 
       this.updatedShowTab(false)
     } else { 
       this.updatedShowTab(true)
     }
   }
  },
beforeDestroy(){ 
  clearInterval(this.clearset)
}
};
</script>

<style  lang="scss" scoped>

.player {
  width: 100%;
  height: 41px;
  position: fixed;
  bottom: 47px;
  z-index: 2;
  border-top: 1px solid #ccc;
  background-color:#fff;
  display: flex;
  align-items: center;
  justify-content: space-between;

 &.playeractive{ 
    width: 100%;
      height: 41px;
      position: fixed;
      bottom: 0px;
      z-index: 2;
      border-top: 1px solid #ccc;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
     
 }
  .left {
    display: flex;
    align-items: center;
    img {
      width: 30px;
      border-radius: 50%;
      margin-left: 10px;
      animation: rotate 10s linear infinite;
      &.play {
          animation-play-state: running;
        }
      
        &.pause {
          animation-play-state: paused;
        }
    }
    .conten {
    width: 250px;
    // background-color: skyblue;
      overflow: hidden;
      margin-left: 10px;
      // text-align: center;
      white-space: nowrap;
      overflow: hidden;
   
      .name {
        font-size: 14px;
        color: #767676;
      }
    }
  }
  .right {
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    .bofang {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid #969393;
      text-align: center;
      line-height: 19px;
      .icon-bofang1 {
        margin-left: 2px;
      }
    }
    .icon-bofangliebiao2 {
      font-size: 24px;
      margin: 0 10px;
    }
  }
     @keyframes rotate {
       0% {
         transform: rotate(0);
       }
  
       100% {
         transform: rotate(360deg);
       }
     }
           
}
</style>